<template>
  <div class="header">
    <div class="middle_ele header_content">
      <div class="logo_box">
        <router-link to="/" class="link_title">
          <img src="./image/logo.png" class="logo"
        /></router-link>

        <router-link to="/" class="link_title"
          ><span class="span_title">前端小站</span></router-link
        >
      </div>
      <div class="nav">
        <ul class="nav_ul">
          <li class="nav_li"><span class="nav_span">推&nbsp;&nbsp;荐</span></li>
          <li class="nav_li"><span class="nav_span">分&nbsp;&nbsp;类</span></li>
          <li class="nav_li"><span class="nav_span">软&nbsp;&nbsp;件</span></li>
          <li class="nav_li"><span class="nav_span">工&nbsp;&nbsp;具</span></li>
          <li class="nav_li"><span class="nav_span">资&nbsp;&nbsp;源</span></li>
        </ul>
      </div>
      <div class="search">
        <div class="bar">
          <input type="text" placeholder="请输入关键字" />
          <div class="btn_search" @click="search">
            <i class="iconfont icon-sousuoxiao"></i>
          </div>
        </div>
      </div>
      <div class="user">
        <div class="tologin">
          <i class="iconfont icon-weidenglu"></i>
          <span>未登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Header',
});
</script>
<script lang="ts" setup>
// 搜索点击事件
const search = () => {
  console.log('search');
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: white;
  transition: 0.3s;
  border-bottom: 1px solid gainsboro;
  box-sizing: border-box;
  display: flex;
}
.header:hover {
  box-shadow: 1px 1px 1px #27a9ae;
}
.header_content {
  display: flex;
}
.logo_box {
  display: flex;
}
.logo {
  cursor: pointer;
  width: 60px;
}

.link_title {
  text-decoration: none;
  color: black;
}
.span_title {
  font-size: 23px;
  margin-left: 10px;
}
.nav {
  margin-left: 20px;
  display: inline-block;
  width: 700px;
}
.nav .nav_ul {
  display: flex;
}

.nav .nav_li {
  cursor: pointer;
  text-align: center;
  width: 140px;
  font-size: 18px;
  box-sizing: border-box;
  transition: 0.3s;
  height: 60px;
}

.nav .nav_li:hover {
  border-bottom: 4px solid #27a9ae;
  // border-radius: 12px;
  // box-shadow: 3px 3px 5px #78a2cf, -3px -3px 5px #a2dcff;
  color: #27a9ae;
}

.search {
  width: 225px;
  // display: flex;
}
.bar {
  width: 0;
  width: 252px;
}

.bar input {
  width: 200px;
  padding-left: 10px;
  border: 2px solid #7ba7ab;
  border-radius: 5px;
  height: 34px;
  color: #9e9c9c;
  transition: 0.5s;
}
.bar input:focus {
  outline: none;
}
.btn_search {
  position: absolute;
  top: 14.5px;
  margin-left: -4px;
  display: inline-block;
  width: 50px;
  border: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 34px;
  background: #7ba7ab;
  line-height: 34px;
  text-align: center;
}

.icon-sousuoxiao {
  color: white;
}

.bar button:before {
  content: '\f002';
  font-family: FontAwesome;
  font-size: 16px;
  color: #f9f0da;
}

.user {
  margin-left: 93px;
  width: 100px;
}
.tologin i {
  font-size: 20px;
}

.tologin span {
  font-size: 16px;
}
</style>
